<template>
    <div>
        <el-dialog title="邀请加入" :close-on-click-modal="false" :visible="value" @close="close" v-drag-dialog
            class="dialog" lock-scroll width="500px">
            <div class="about-dialog-main">

                <!-- <div v-if="model.currentCode">当前邀请码：<span class="code">{{ model.currentCode }}</span></div> -->

                <el-form label-width="100px" style="width: 100%;" :model="model" :rules="rules" ref="ruleForm">
                    <el-form-item label="有效期至:" prop="expiration">
                        <el-date-picker v-model="model.expiration" placeholder="请选择" clearable
                            :style="{ width: '100%' }" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                    <div v-show="model.code">
                        <div>邀请码：<span class="code" id="copy-code">{{ model.code }}</span> <i @click="onOpen('copy-code'
            , model.code)" class="el-icon-copy-document"></i> </div>
                        <div class="invitation-link">邀请链接：<span class="code" id="copy-url">{{ model.invitationLink
                                }}</span>
                            <i @click="onOpen('copy-url', model.invitationLink)" class="el-icon-copy-document"></i>
                        </div>
                    </div>
                    <el-row type="flex" justify="center">
                        <el-button :disabled="disabled" @click="generateLink" block type="primary">生成邀请链接</el-button>
                    </el-row>
                </el-form>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { getInvitation, getInvitationList } from '@/api/permission/user'
import dragDialog from "@/directive/el-drag-dialog";
import ClipboardJS from 'clipboard'

export default {
    props: {
        organizeId: {
            type: String,
            default: "",
        },
        value: {
            type: Boolean,
            default: false,
        }
    },
    directives: { dragDialog },
    data() {
        return {
            disabled: false,
            clipboard: null,
            model: {
                expiration: "",
                code: "",
                currentCode: "",
                invitationLink: "",
            },
            rules: {
                expiration: [
                    {
                        required: true,
                        message: "请选择日期",
                        trigger: "blur",
                    },
                ],
            },
        }
    },
    mounted() {
        getInvitationList({ id: this.organizeId || this.$store.getters.organizeId }).then(res => {
            if (res.code === 200) {
                this.model.currentCode = res.data
            }
        })
    },
    methods: {
        generateLink() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.disabled = true
                    getInvitation({
                        expiration: this.model.expiration, id: this.organizeId || this.$store.getters.organizeId
                    }).then(res => {
                        if (res.code === 200) {
                            this.model.invitationLink = process.env.VUE_APP_XY_INVITE_URL + "?invitation=" + res.data
                            this.model.code = res.data
                        }
                        this.disabled = false;
                        console.log(res)
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });

        },
        onOpen(el, code) {
            this.clipboard = new ClipboardJS('#' + el, {
                text: () => code
            })
            let that = this
            this.clipboard.on('error', e => {
                that.$message.error('代码复制失败')
            })

            this.clipboard.on('success', function (e) {
                that.$message.success('复制成功')
            });
            document.getElementById(el).click()

            this.clipboard.destroy();
        },
        close() {
            this.model.expiration = "";
            this.$emit("input", false);
            this.model.code = "";
        }
    },
}
</script>
<style scoped>
.dialog {
    height: 500px;
}

.invitation-link {
    margin: 20px 0;
}

.code {
    color: #333;
    font-size: 18px;
    font-weight: bold;
    margin: 0 10px;
}

i {
    cursor: pointer;
}
</style>
